import { HTMLProps, Fragment } from 'react';
import cls from 'classnames';
import { StaightLine } from 'components/lines';
import {
  MuseumArtContent,
  MuseumMusicContent,
  MuseumStoreContent,
  MuseumQAContent,
} from './components/contents';
import { translate as $ } from 'utils';
import styles from './index.module.scss';

export const MuseumDivider = () => {
  return (
    <div className={styles.divider}>
      <div className={styles.point}></div>
      <div className={styles.dividerInner}>
        <div className={styles.dividerText}>
          <p className={styles.tItem}>
            A-SOUL
          </p>
          <p className={styles.tItem}>
            MUSEUM
          </p>
        </div>
        <div className={styles.hoz}></div>
      </div>
      <div className={styles.point}></div>
    </div>
  )
}

export interface MuseumTitleProps extends HTMLProps<any> {
  museumName: string;
  museumDesciption: string;
}

export const MuseumTitle = ({
  museumName,
  museumDesciption,
  className,
  ...others
}: MuseumTitleProps) => {
  return (
    <h2 className={cls(styles.museumTitle, className)} {...others}>
      <p className={styles.titleAsoul}>A-SOUL</p>
      <p className={styles.titleDesc}>{museumDesciption}</p>
      <p className={styles.titleName}>{museumName}</p>
    </h2>
  )
}

const CONTENTS = [
  {
    museumName: '艺术馆',
    museumDesciption: '官方美图',
    content: <MuseumArtContent />,
  },
  {
    museumName: '音乐馆',
    museumDesciption: '官方音乐',
    content: <MuseumMusicContent />,
  },
  {
    museumName: '实物馆',
    museumDesciption: '官方周边',
    content: <MuseumStoreContent />
  },
  {
    museumName: '咨询处',
    museumDesciption: '官方QA',
    content: <MuseumQAContent />
  },
];

export default () => {
  return (
    <div className={styles.home}>
      <div className={styles.head}>
        <div className={styles.headBg}>
          <p className={styles.bgText}>A-SOUL</p>
        </div>
        <h1 className={styles.title}>
          <div className={styles.titleInner}>
            <p className={styles.titleItem}>{$('枝江展览馆')}</p>
            <p className={styles.titleItem}>{$('枝江展览馆')}</p>
            <p className={styles.titleItem}>{$('枝江展览馆')}</p>
          </div>
        </h1>
      </div>
      {CONTENTS.map(({ museumName, museumDesciption, content }, idx) => {
        return (
          <Fragment key={idx}>
            <MuseumDivider />
            <section className={styles.sect}>
              <div className={styles.sectHead}>
                <MuseumTitle
                  museumName={$(museumName)}
                  museumDesciption={$(museumDesciption)}
                />
                <StaightLine className={styles.sideline}/>
                <div className={styles.sectHeadNo}>No.{idx + 1}</div>
              </div>
              {content}
            </section>
          </Fragment>
        )
      })}
    </div>
  )
}
